<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="#" />
    <meta charset="UTF-8">
    <title>BackPage</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <style>
        .layui-tab-content {
            padding: 0;/*layui-tab-content:默认有padding: 10px;的值，因为iframe的绝对定位脱离文档流，所以会存在20px的空白空间*/
        }
        .show-frame {
            top: 50px!important;
            /*默认.layui-layout-admin .layui-body {
                top: 60px;
                bottom: 44px;
            }*/
            overflow: hidden;/*消除浏览器最右边的滚动条*/
        }
        .frame {
            position: absolute;
            padding: 10px;/*与layui-footer隔开一段距离*/
            width: 100%;
            height: 100%;
        }
    </style>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css">
    <script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul id="ul" class="layui-nav layui-nav-tree" lay-filter="test">
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <!--<div style="padding: 15px;">内容主体区域</div>-->
        <div class="layui-tab layui-tab-brief show-frame" lay-allowClose="true" lay-filter="value">
            <ul class="layui-tab-title">
                <li class="layui-this layui-icon layui-icon-face-smile ">网站设置</li>

            </ul>
            <div class="layui-tab-content">
                <%--<div class="layui-tab-item layui-show"><h1>首页展示内容1</h1></div>--%>
                <div class="layui-tab-item layui-show">
                    <%--<iframe style="width: 100%;height: 85%" class='frame' src='${pageContext.request.contextPath}/indexGangtiexia.html'></iframe>--%>
                    首页展示
                </div>

            </div>
        </div>

    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>

<script>
        console.info(111222)
        $.ajax({
            url:'${pageContext.request.contextPath}/menu/show',
            dataType:'json',
            success:function (result) {
                var content = '';
                $.each(result,function (i, obj) {
                    content += '<li class="layui-nav-item layui-nav-itemed"><a  href="javascript:;">'+obj.menuName+'</a>\n' ;
                    $.each(obj.menus,function (i2, obj2) {
                        content += '<dl class="layui-nav-child"><dd><a href="javascript:;" name="add" id="'+obj2.menuId+'" title="'+obj2.menuName+'" contents="'+obj2.menuUrl+'">'+obj2.menuName;
                        content += '</a></dd></dl>';
                    });
                    content += '\n</li>\n';
                });
                $('#ul').html(content);
                // 4.通过element渲染页面
                layui.use('element', function(){
                    var element = layui.element;
                    element.render('nav', 'test');
                });

            }
        });



    layui.use(['element'], function () {
        var element = layui.element;
        $('[name="add"]').click(function () {
            console.log($(this).prop('id'));

            var id = $(this).prop('id');
            if ($("li[lay-id=" + id + "]").length == 0) {
                element.tabAdd('value', {
                    title: $(this).prop('title'),
                    content: "<iframe  class='frame' src='${pageContext.request.contextPath}" + $(this).attr("contents") + "'></iframe>",
                    id: $(this).prop('id')
                })
            }
            element.tabChange('value', id);

        });

    });
</script>
</body>
</html>